<template id='signCard'>
  <div class="signCard disCenter">
    <transition :name="options.cardTransition">
      <div class="content" @click.stop v-show="options.isShow">
        <div class="title">{{ options.title }}</div>
        <slot name="descs"></slot>
        <slot name="form"></slot>
        <div class="btn confirm" v-dc="confirm">{{ options.btn }}</div>
      </div>
    </transition>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "signCard",
  components: {},
  props: {
    options: {
      type: Object,
    },
  },
  // 定义属性
  data() {
    return {
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    confirm() {
      this.$emit("click");
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.signCard {
  .content {
    width: 390px;
    height: 560px;
    background-color: #ffffff;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
      0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    border: solid 1px #888888;
    padding: 42px 65px 25px 65px;
    color: @tColor;
    font-family: @tFamily;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    z-index: 100;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    .title {
      user-select: none;
      font-size: 24px;
    }

    .confirm {
      position: absolute;
      bottom: 70px;
    }
  }
}

//手机样式
@media screen and (max-width: 650px) {

  .signCard {
    .content {
      padding: 42px 20px 25px 20px;
      width: 314px;
      height: 462px;

      .confirm {
        bottom: 50px;
      }
    }
  }
}
</style>